{% extends 'layout/basic.html' %}
{% load static %}

{% block title %} 首页 {% endblock %}

{% block css %}
    <style>
        img {
            width: 100%;
        }
    </style>
{% endblock %}

{% block content %}

    <div>
        <div class="center-block col-md-12 panel-info"
             style="text-align: center">

            <b class="col-md-6"><a href="{% url 'project_list' %}">管理中心</a></b>

            <b class="col-md-6"><a href="{% url 'glory_list' %}">荣誉中心</a></b></div>
        <canvas style="padding-top: 20px"></canvas>
        {#        <img src="{% static 'web/image/image-1.png' %}">#}
        {#        <img src="{% static 'web/image/image-2.png' %}">#}
        {#        <img src="{% static 'web/image/image-3.png' %}">#}
        {#        <img src="{% static 'web/image/image-4.png' %}">#}
    </div>
{% endblock %}

{% block js %}

    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth*1;
        canvas.height = window.innerHeight*0.85;
        let str = "makemestronger".split('');
        let arr = Array(Math.ceil(canvas.width / 10)).fill(0);
        let run = () => {
            ctx.fillStyle = 'rgba(0,0,0,0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#0f0';
            arr.forEach((item, index) => {
                ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, item + 10);
                arr[index] = item > canvas.height || item > 10000 * Math.random() ? 0 : item + 10;
            });
        };
        // run()
        setInterval(run, 40);


        layui.use(['layer'],function(args){
           var layer = layui.layer;
           layer.msg('TaskSaas')
        });

    </script>

{% endblock %}